import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { connect } from "react-redux";
import { logout } from "../store/actions/login"

class Navigation extends Component {
  logout(e) {
    e.preventDefault();
    this.props.logout('token');
  }

  render() {
    const { isAuthenticated } = this.props.auth
    const userLink = (
      <ul className="navbar-nav mr-auto">
        <li className="nav-item">
          <Link className='nav-link' to="/shop">shop</Link>
        </li>
        <li className="nav-item">
          <a href="" className="nav-link" onClick={this.logout.bind(this)}>退出</a>
        </li>
      </ul>
    );
    const guestLink = (
      <ul className="navbar-nav mr-auto">
        <li className="nav-item">
          <Link className='nav-link' to="/signup">注册</Link>
        </li>
        <li className="nav-item">
          <Link className='nav-link' to="/login">登录</Link>
        </li>
        <li className="nav-item">
          <Link className='nav-link' to="/shop">shop</Link>
        </li>
      </ul>
    )
    return (
      <nav className='navbar navbar-expand-lg navbar-light bg-light mb-3'>
        <div className="container">
          <Link className='navbar-brand' to="/">login功能</Link>
          <button className='navbar-toggler' type='button' data-toggle="collapse" data-target="#navbarsExample05" aria-controls="navbarsExample05" aria-expanded="false" aria-label="Toggle navigation">
            <span className='navbar-toggler-icon'></span>
          </button>
          <div className="collapse navbar-collapse" id="navbarExample05">
            {isAuthenticated ? userLink : guestLink}
          </div>
        </div>
      </nav>
    )
  }
}

const mapStateToProps = state => {
  return {
    auth: state.auth
  }
}

export default connect(mapStateToProps, { logout })(Navigation)
